
    <!DOCTYPE html>
    <html lang="zh-CN">
    <head>
      <meta charset="UTF-8">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <title>7、高级功能探索 - 学习卡片</title>
      <style>
        body { font-family: sans-serif; background-color: #f0f8ff; color: #333; display: flex; flex-direction: column; align-items: center; padding: 50px 20px; }
        .header h1 { font-size: 32px; }
        .grid-container { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; width: 100%; max-width: 1200px; }
        .card-container { perspective: 1200px; cursor: pointer; height: 250px; }
        .card { width: 100%; height: 100%; position: relative; transform-style: preserve-3d; transition: transform 0.7s; border-radius: 16px; box-shadow: 0 4px 16px rgba(0,0,0,0.08); }
        .card-container.flipped .card { transform: rotateY(180deg); }
        .card-face { position: absolute; width: 100%; height: 100%; backface-visibility: hidden; display: flex; flex-direction: column; box-sizing: border-box; border-radius: 16px; background-color: #fff; padding: 24px; }
        .card-back { background-color: #f0fff4; transform: rotateY(180deg); justify-content: space-between; }
        .card-category { font-size: 14px; color: #0052d9; margin-bottom: 8px; font-weight: 500; }
        .card-question { font-size: 20px; font-weight: 500; flex-grow: 1; display: flex; align-items: center; justify-content: center; text-align: center; }
        .card-answer-wrapper { flex-grow: 1; overflow-y: auto; }
        .card-answer { font-size: 15px; line-height: 1.7; }
        .card-footer { font-size: 13px; color: #8a919f; border-top: 1px solid #f0f0f0; padding-top: 16px; margin-top: 16px; }
        .card-source { font-size: 13px; color: #8a919f; border-top: 1px solid #f0f0f0; padding-top: 12px; margin-top: 12px; }
      </style>
    </head>
    <body>
      <div class="header">
        <h1>7、高级功能探索 - 学习卡片</h1>
      </div>
      <div class="grid-container">
        
    <div class="card-container" onclick="this.classList.toggle('flipped');">
      <div class="card">
        <div class="card-face card-front">
          <div class="card-category">特性</div>
          <div class="card-question">在Cursor中，除了常规断点外，还支持哪几种高级断点功能？</div>
          <div class="card-footer">点击卡片查看答案</div>
        </div>
        <div class="card-face card-back">
          <div class="card-category">特性</div>
          <div class="card-answer-wrapper">
            <div class="card-answer">Cursor支持四种高级断点功能：1. 条件断点，即设置一个表达式，仅当表达式为真时才触发；2. 命中计数断点，即设置断点在被命中特定次数后才触发；3. 日志点，它不会中断程序执行，而是在命中时向调试控制台输出信息；4. 内联断点，允许在单行代码的特定部分设置断点。</div>
          </div>
          <div class="card-source">来源: 7.1 调试与分析工具 -> 调试器配置与使用</div>
        </div>
      </div>
    </div>

    <div class="card-container" onclick="this.classList.toggle('flipped');">
      <div class="card">
        <div class="card-face card-front">
          <div class="card-category">机制</div>
          <div class="card-question">Cursor的AI辅助调试功能体现在哪些方面？请列举至少三种。</div>
          <div class="card-footer">点击卡片查看答案</div>
        </div>
        <div class="card-face card-back">
          <div class="card-category">机制</div>
          <div class="card-answer-wrapper">
            <div class="card-answer">Cursor的AI辅助调试主要体现在：1. 错误理解，AI可以分析错误信息并提供修复建议；2. 条件表达式生成，AI能根据自然语言描述生成复杂的断点条件；3. 调试路径分析，AI可分析调用堆栈，解释程序为何执行到意外路径；4. 变量状态诊断，AI能检查变量值是否符合预期；5. 断点策略建议，AI会根据调试目标建议在哪里设置断点。</div>
          </div>
          <div class="card-source">来源: 7.1 调试与分析工具 -> AI辅助调试流程</div>
        </div>
      </div>
    </div>

    <div class="card-container" onclick="this.classList.toggle('flipped');">
      <div class="card">
        <div class="card-face card-front">
          <div class="card-category">技术</div>
          <div class="card-question">Cursor是如何支持远程开发的？</div>
          <div class="card-footer">点击卡片查看答案</div>
        </div>
        <div class="card-face card-back">
          <div class="card-category">技术</div>
          <div class="card-answer-wrapper">
            <div class="card-answer">Cursor通过SSH扩展连接到远程开发环境。这使得开发者可以在本地编辑器中直接编辑位于远程服务器上的文件，并且可以无缝使用远程环境的调试器和终端。AI功能在远程开发模式下同样可用。</div>
          </div>
          <div class="card-source">来源: 7.2 团队协作能力 -> 远程协作模式</div>
        </div>
      </div>
    </div>

    <div class="card-container" onclick="this.classList.toggle('flipped');">
      <div class="card">
        <div class="card-face card-front">
          <div class="card-category">模式</div>
          <div class="card-question">在团队协作中，如何利用Cursor来确保所有成员使用一套统一的、推荐的扩展插件？</div>
          <div class="card-footer">点击卡片查看答案</div>
        </div>
        <div class="card-face card-back">
          <div class="card-category">模式</div>
          <div class="card-answer-wrapper">
            <div class="card-answer">通过在项目根目录下的 `.vscode` 文件夹中创建一个名为 `extensions.json` 的文件。在这个文件中，可以定义一个推荐扩展列表。当团队成员打开该项目时，Cursor会自动提示他们安装这些被推荐的扩展，从而确保团队工具集的一致性。</div>
          </div>
          <div class="card-source">来源: 7.3 扩展与自定义 -> 插件管理与推荐</div>
        </div>
      </div>
    </div>

    <div class="card-container" onclick="this.classList.toggle('flipped');">
      <div class="card">
        <div class="card-face card-front">
          <div class="card-category">特性</div>
          <div class="card-question">用户可以通过哪些方式自定义Cursor中的AI行为？</div>
          <div class="card-footer">点击卡片查看答案</div>
        </div>
        <div class="card-face card-back">
          <div class="card-category">特性</div>
          <div class="card-answer-wrapper">
            <div class="card-answer">用户可以通过多种方式自定义AI行为，包括：1. 选择默认使用的AI模型并配置其参数；2. 创建和保存自定义的提示词模板；3. 配置代码生成的风格（如简洁或带详细注释）；4. 设置隐私与安全选项，例如将敏感文件夹排除在AI上下文之外；5. 创建绑定到快捷键的自定义AI命令。</div>
          </div>
          <div class="card-source">来源: 7.3 扩展与自定义 -> AI行为定制选项</div>
        </div>
      </div>
    </div>

    <div class="card-container" onclick="this.classList.toggle('flipped');">
      <div class="card">
        <div class="card-face card-front">
          <div class="card-category">技术</div>
          <div class="card-question">如何在Cursor中创建一个自定义的AI命令，并为其绑定快捷键？</div>
          <div class="card-footer">点击卡片查看答案</div>
        </div>
        <div class="card-face card-back">
          <div class="card-category">技术</div>
          <div class="card-answer-wrapper">
            <div class="card-answer">可以在JSON配置文件中，通过`cursor.ai.customCommands`数组来创建自定义AI命令。每个命令是一个对象，需要包含三个键：`name`（命令的名称）、`prompt`（预设的、希望AI执行的提示词）和`keybinding`（为该命令绑定的快捷键）。</div>
          </div>
          <div class="card-source">来源: 7.3 扩展与自定义 -> AI行为定制选项</div>
        </div>
      </div>
    </div>

    <div class="card-container" onclick="this.classList.toggle('flipped');">
      <div class="card">
        <div class="card-face card-front">
          <div class="card-category">理论</div>
          <div class="card-question">Cursor能够为多种编程语言提供智能感知、语法检查等高级功能，其核心技术基础是什么？</div>
          <div class="card-footer">点击卡片查看答案</div>
        </div>
        <div class="card-face card-back">
          <div class="card-category">理论</div>
          <div class="card-answer-wrapper">
            <div class="card-answer">其核心技术是语言服务器协议（Language Server Protocol, LSP）。Cursor通过内置或扩展安装的语言服务器来为特定语言提供支持，从而实现语法高亮、代码导航、智能感知和重构等高级功能。</div>
          </div>
          <div class="card-source">来源: 7.4 多语言开发支持 -> 语言服务器配置</div>
        </div>
      </div>
    </div>

    <div class="card-container" onclick="this.classList.toggle('flipped');">
      <div class="card">
        <div class="card-face card-front">
          <div class="card-category">机制</div>
          <div class="card-question">当一个项目包含多种语言（例如前端React和后端Python）时，Cursor如何有效管理这种复杂性？</div>
          <div class="card-footer">点击卡片查看答案</div>
        </div>
        <div class="card-face card-back">
          <div class="card-category">机制</div>
          <div class="card-answer-wrapper">
            <div class="card-answer">Cursor通过以下机制管理多语言项目：1. 多语言工作区，允许在单一工作区中管理不同语言的项目；2. 智能上下文切换，AI功能会自动适应当前正在编辑的语言；3. 多语言调试，可以配置复合调试会话，同时调试不同语言的组件。</div>
          </div>
          <div class="card-source">来源: 7.4 多语言开发支持 -> 跨语言项目管理</div>
        </div>
      </div>
    </div>

    <div class="card-container" onclick="this.classList.toggle('flipped');">
      <div class="card">
        <div class="card-face card-front">
          <div class="card-category">功能</div>
          <div class="card-question">在跨语言开发场景中，Cursor的AI能提供哪些具体的帮助？</div>
          <div class="card-footer">点击卡片查看答案</div>
        </div>
        <div class="card-face card-back">
          <div class="card-category">功能</div>
          <div class="card-answer-wrapper">
            <div class="card-answer">在跨语言开发中，AI可以提供多种帮助，例如：1. 生成跨语言的接口定义（如API规范）；2. 将一种编程语言的代码片段翻译成另一种语言；3. 帮助开发者理解不同语言之间的数据结构和类型对应关系。</div>
          </div>
          <div class="card-source">来源: 7.4 多语言开发支持 -> 跨语言项目管理</div>
        </div>
      </div>
    </div>

      </div>
    </body>
    </html>
